
import React from 'react'


class BackgroundSettingUserRole extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentWillReceiveProps(props) {
    var data = props.data;
    this.setState({
      data: data
    })
  }

  componentDidUpdate() {
    // console.log(this.props.data)
  }

  onDeleteSysRoleClick(data) {
    if (this.state.data.sys_role_user.length <= 1) {
      alert("至少需要一个角色!")
      return;
    }
    this.props.onDeleteSysRoleClick(data);
  }

  renderList() {
    var self = this;

    if(this.state.data.sys_role_user&&this.state.data.sys_role_user.length>0){
      return this.state.data.sys_role_user.map(function(data) {
        var name = "";
        if (data.role) {
          name = data.role.name
        }
        return (
          <tr>
            <td>{name}</td>
            <td><a onClick={(event)=>self.onDeleteSysRoleClick(data)}>删除</a></td>
          </tr>
        )
      })
    }
    return "";
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="BackgroundSettingUserRole" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">修改角色</h4>
              <button type="button" onClick={(event)=>this.props.onCreateRoleClick()}><span className="glyphicon glyphicon-plus"></span></button>
            </div>
            <div className="modal-body">
              <table className="table table-bordered">
                {this.renderList()}
              </table>
              <input ref="UserId" hidden/>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


export default BackgroundSettingUserRole;
